<template>
  <view class="container">
    <text class="title">添加用户</text>
    <form>
	  
      <view class="form-group" style="margin-top: 20px;">
        <text>用户名称<span style="color: red;">*</span></text>
        <u-input v-model="form.userName" placeholder="请输入用户名称" required maxlength="30"></u-input>
      </view>
      <view class="form-group">
        <text>手机号<span style="color: red;">*</span></text>
        <u-input v-model="form.phonenumber" placeholder="请输入手机号" required  maxlength="11" pattern="^1[3-9]\d{9}$/"/>
      </view>
      <view class="form-group" style="display: none;">
        <text>用户名 </text>
        <u-input v-model="form.nickName" placeholder="请输入用户名" required maxlength="30" />
      </view>
      <view class="form-group">
        <text>用户密码</text>
        <u-input type="password" v-model="form.password" placeholder="请输入密码,默认111111" required maxlength="30"/>
      </view>
      <view class="form-group">
        <text>备注</text>
        <textarea v-model="form.note" placeholder="请输入备注内容" maxlength="200"></textarea>
      </view>
      <view class="button-group">
        <u-button class="confirm-btn" type="button" @click="submitForm">提交</u-button>
        <u-button class="cancel-btn" type="button" @click="cancel">重置</u-button>
      </view>
    </form>
  </view>
</template>

<script>
import * as userAPI from '@/api/system/user.js';

export default {
  data() {
    return {
		
		
      form: {
        nickName: '',
        phonenumber: '',
        userN: '',
        password: '',
        note: '',
		// postIds: [],
		// status: '0',
		roleIds: [2]
      }
    };
  },
    created() {
      this.resetForm();
    },
  methods: {
    submitForm() {
		

		this.form.nickName = this.form.userName;
		
		 if (!this.validateForm()) {
		        return;
		      }
     
      console.log('Submitted:', this.form);
	
      userAPI.addUser(this.form).then(response => {
       
        uni.showToast({
          title: '新增成功',
          icon: 'success'
        });
		setTimeout(() => {
		  uni.navigateTo({
		    url: '/pages/home/admin/user/index',
		  });
		}, 1000); 
      });
    },
    cancel() {
      this.resetForm();
    },
	validateForm() {
		
		if (!this.form.nickName) {
		  uni.showToast({
		    title: '用户名称不能为空',
		    icon: 'none'
		  });
		  return false;
		}
	      if (this.form.nickName.length > 30) {
			  uni.showToast({
			    title: '用户名称不得超过30个字符',
			    icon: 'none'
			  });
	        
	        return false;
	      }
		  if (!this.form.phonenumber) {
		    uni.showToast({
		      title: '手机号不能为空',
		      icon: 'none'
		    });
		    return false;
		  }
		  
		  if (!/^1[3-9]\d{9}$/.test(this.form.phonenumber)) {
		    uni.showToast({
		      title: '手机号格式不正确',
		      icon: 'none'
		    });
		    return false;
		  }

	      if (this.form.userName.length > 30) {
	        
			uni.showToast({
			  title: '用户名不得超过30个字符',
			  icon: 'none'
			});
	        return false;
	      }
	      if (this.form.password.length > 0 && this.form.password.length > 30) {
	       
			uni.showToast({
			  title: '密码不得超过30个字符',
			  icon: 'none'
			});
	        return false;
	      }
	      if (this.form.note.length > 200) {
	        alert('备注不得超过200个字符');
	        return false;
	      }
	      return true;
	    },
    resetForm() {
      this.form = {
        nickName: '',
        phonenumber: '',
        userName: '',
        password: '',
        note: '',
		roleIds: [2]
      };
    }
  }
}
</script>


<style scoped>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.form-group text {
  display: block;
  margin-bottom: 5px;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.confirm-btn,
.cancel-btn {
  padding: 0px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.confirm-btn {
  background-color: #1E90FF;
  color: white;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}
</style>
